<!DOCTYPE html>
<html  lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千词斩</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        header img{
            width: 100%;
            height: 100%;
        }
       
	   
        html,body{
                background-image :url(../static/images/page2.11.jpg);
                /* 图片铺满整个背景 */
                position: relative;
				background-repeat: no-repeat;
				background-color: #008081;
			}
        input{
            width: 300px;
            height: 100px;
			margin: 395px;
        }
        main{
            display: flex;
            padding-right: 10px;
            padding-top: 0px;

        }
        .label5{
            display: inline-block;
            width: 120px;
            text-align: left;
        }
        .label1{
            display: inline-block;
            width: 120px;
            text-align: left;
        }
        .label2{
            display: inline-block;
            width: 120px;
            text-align: left;
        }
        .label3{
            display: inline-block;
            width: 140px;
            text-align: left;
        }
		/*.btn2{*/
		/*	position: absolute;*/
		/*	left:233px;*/
        /*    top:0px;*/
		/*}*/
		/*.btn1{*/
		/*	position: absolute;*/
		/*	left: 450px;*/
        /*    top:0px;*/
		/*}*/
        .btn2{
            position: absolute;
            left:380px;
            top:50px;
        }
        .btn1{
            position: absolute;
            left: 380px;
            top:200px;
        }
        .btn3{
            position: absolute;
            left: 380px;
            top: -100px;
        }
		 .rank{
             position: absolute;
             right: 350px;
             top: 507px;
             /* width: auto; */
             position: absolute;
             left: 1354px;
             width: 600px;
             font-size: 185%;
             font-family: "仿宋";
         }
        .rank1{
            position: absolute;
            right: 350px;
            top: 461px;
            /* width: auto; */
            position: absolute;
            left: 1351px;
            width: 600px;
            font-size: 185%;
            font-family: "仿宋";
        }
		 #divhua{
			position: absolute;
    left: 1528px;
    top: 514px;
    width: 367px;
    height: 362px;
    background-color: silver;
		 }
		 
		 #pname{
			FONT-FAMILY: "仿宋";
		 }
		 
    </style>
</head>
<body onload="getChart()">

    <main>
       <input type="image" class="btn1" name="btn" src="../static/images/page2.4.png" onclick="window.location='http://localhost:8866/testWord'">
       <input type="image" class="btn2" name="btn" src="../static/images/page2.5.png" onclick="window.location='http://localhost:8866/fast'">
        <input type="image" class="btn3" name="btn" src="../static/images/page2.4.1.png" onclick="toLearn()">

<!--        <div id="divhua">-->
<!--        <div id="pname">-->
<!--            <h1>词源：</h1>-->
<!--            <h2>&emsp;《全国大学英语四、六级考试大纲（2016年修订版）》</h2>-->
<!--            <h2>&emsp;《雅思考试大纲词汇》</h2>-->
<!--            <h1>测试原理：</h1>-->
<!--            <h2>&nbsp&emsp;按难度系数加权计算词汇量</h2>-->
<!--        </div>-->
<!--        </div>-->


<!--        <div>-->
<!--&lt;!&ndash;            <button id="rank" onclick="getChart()">查看词汇量排行榜</button>&ndash;&gt;-->
<!--            <input type="button" value="查看生词" id="button" onclick="toLearn()">-->
            <div type="image" id="us" name="rank1"  class="rank1"></div>
            <div type="image" id="usersForm" name="rank"  class="rank">
                <input type="image" src="../static/images/page2.5.png">
            </div>
<!--        </div>-->

    </main>
    <script>
        function toLearn(){
            window.location.href="learn";
        }
        function getChart(){
            // window.location.href="login";
            $.ajax({
                url: 'chart',
                type: 'get',
                success: function (users) {
                    // alert(users.length);
                    // alert(users[0].date);
                    var st="<div>"+"<label class='label5'>排名</label>"
                        +"<label class='label1'>昵称</label>"
                        +"<label class='label2'>词汇量</label>"
                        +"<label class='label3'>用时</label>"
                        +"</div>";
                    var str = "";
                    for (var i = 0; i < users.length ;i++)
                    {
                        var j=i+1;
                        str += "<div>"+"<label class='label5'>第"+j+"名</label>"
                            +"<label class='label1'>"+users[i].username+"</label>"
                            +"<label class='label2'>"+users[i].score+"</label>"
                            +"<label class='label3'>"+users[i].time+"</label>"
                            +"</div>";
                    }
                    document.getElementById("us").innerHTML=st;
                    document.getElementById("usersForm").innerHTML=str;
                },
                error: function () {
                    alert('服务器超时，请重试！');
                }
            })
        }

        window.onload = function(){

            // alert(111);
            getChart();
            var img = document.getElementById("img");
            var button = document.getElementById("button");
            //button.onclick = changePic;
        }


    </script>
</body>
</html>
